

let perpetualTableTabsObserver = null

import { createTableBottomPerpetual } from '@/content-scripts/components/trading/perpetualContract/bottomTable.js'
import { getElement } from '@/content-scripts/getElement.js'

export function perpetualBottomTabs() {
    if (perpetualTableTabsObserver) perpetualTableTabsObserver.disconnect();

    let previousValues = {
        firstStageTabs: null
    };

    perpetualTableTabsObserver = new MutationObserver(() => {
        const tabBtn = getElement("perpetual.table.tabs")[0]
        // console.log(tabBtn,'tttttaaaabbbbbbbbbtabsss');

        let tabBtnHtml = null
        if (tabBtn.innerHTML.includes('span')) {
            tabBtnHtml = getElement("perpetual.table.tabs.span", tabBtn)[0].innerHTML
            // tabBtn.querySelector('span').innerHTML
            // console.log(tabBtnHtml,'tabBtnHtmltabBtnHtmltabBtnHtmltabBtnHtml');

        } else {
            tabBtnHtml = tabBtn.innerHTML
        }
        const hasChanged =
            tabBtnHtml != previousValues.firstStageTabs
        if (tabBtn && hasChanged) {
            previousValues = {
                firstStageTabs: tabBtnHtml
            }
            tabsClassify(tabBtnHtml)
        }
    });
    perpetualTableTabsObserver.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true,
    });
}

import { language } from '@/content-scripts/locales';

function tabsClassify(value) {
    // console.log(value);
    if (value == '仓位') {
        position(value)
    } else if (value == '历史仓位') {
        historicalPosition(value)
    } else if (value == '当前委托') {
        currentCommission(value)
    } else if (value == '历史委托') {
        historicalCommission(value)
    } else if (value.includes(language.tradeHistory)) {
        transactionRecord(value)
    } else if (value == '资金流水') {
        capitalFlow(value)
    } else if (value == '交易机器人') {
        tradingRobot(value)
    }
}


let positionObserver = null

function position(value) {
    clearAllObserver()

    let previousValues = {
        detailsListValue: null,
        warehouseValue: null
    };

    positionObserver = new MutationObserver(() => {
        const detailsListTabs = document.querySelector(
            ".future_order_trade_filter_wrap > .mantine-md739r > .dgXGgZ > .mantine-w1aeuy > span:nth-child(2)"
        );
        const warehouseTabs = document.querySelector(".future_order_trade_filter_wrap > .mantine-15he3b8 > .gZDgCa > .mantine-w1aeuy > span")
        // console.log(detailsListTabs, 'detailsListTabs');
        // console.log(detailsListTabs.innerHTML, 'detailsListTabs');
        // console.log(warehouseTabs, 'warehouseTabs');
        // console.log(warehouseTabs.innerHTML, 'warehoseTabs');

        if (warehouseTabs) {
            const hasChanged =
                detailsListTabs.innerHTML != previousValues.detailsListValue ||
                warehouseTabs.innerHTML != previousValues.warehouseValue
            if (detailsListTabs && warehouseTabs && hasChanged) {
                previousValues = {
                    firstStageTabs: value,
                    detailsListValue: detailsListTabs.innerHTML,
                    warehouseValue: warehouseTabs.innerHTML
                }
                // console.log(previousValues,'previousValues');
                if (previousValues.detailsListValue.includes('列表')) {
                    createTableBottomPerpetual(previousValues)
                }
            }
        }

    });
    positionObserver.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true,
    });
}

let historicalPositioObserver = null

function historicalPosition(value) {
    clearAllObserver()

    let previousValues = {
        directionValue: null,
        profitLossValue: null,
        timeIntervaValue: null,
        dateTimeValue: null
    };

    historicalPositioObserver = new MutationObserver(() => {
        const selectGroup = document.querySelectorAll(
            ".mantine-1g7e83g > div > .mantine-dcm9q0 > .mantine-wz61vw"
        );
        // console.log(selectGroup, 'selectGroup');
        const directionSelect = selectGroup[0]
        const profitLossSelect = selectGroup[1]
        // console.log(directionSelect, profitLossSelect, 'directionSelect,profitLossSelect');
        // const timeInterval = document.querySelector('.future_order_trade_filter_wrap > .tr-items-center > .mantine-15he3b8 > .tr-border-c-text-1');
        // console.log(timeInterval, 'timeInterval');
        const dateTimeInput = document.querySelector('.future_order_trade_filter_wrap > .tr-items-center > .gui_date_a6245a30 > div > span');
        // console.log(dateTimeInput, 'dateTime');

        const hasChanged =
            directionSelect.value != previousValues.directionValue ||
            profitLossSelect.value != previousValues.profitLossValue ||
            // timeInterval.innerHTML != previousValues.timeIntervaValue ||
            dateTimeInput.innerHTML != previousValues.dateTimeValue
        if (directionSelect && profitLossSelect && dateTimeInput && hasChanged) {
            previousValues = {
                firstStageTabs: value,
                directionValue: directionSelect.value,
                profitLossValue: profitLossSelect.value,
                // timeIntervaValue: timeInterval.innerHTML,
                dateTimeValue: dateTimeInput.innerHTML
            }
            createTableBottomPerpetual(previousValues)
        }
    });
    historicalPositioObserver.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true,
    });
}

let currentCommissioObserver = null

function currentCommission(value) {
    clearAllObserver()

    let previousValues = {
        commTypeValue: null
    };

    currentCommissioObserver = new MutationObserver(() => {
        const commTypeTabs = document.querySelector(
            ".future_order_trade_filter_wrap > .mantine-15he3b8 > .gZDgCa > .mantine-w1aeuy > span"
        );
        // console.log(commTypeTabs, 'commTypeTabs');
        // console.log(commTypeTabs.innerHTML, 'commTypeTabs');
        if (commTypeTabs) {
            const hasChanged =
                commTypeTabs.innerHTML != previousValues.commTypeValue
            if (commTypeTabs && hasChanged) {
                previousValues = {
                    firstStageTabs: value,
                    commTypeValue: commTypeTabs.innerHTML
                }
                setTimeout(() => {
                    createTableBottomPerpetual(previousValues)
                }, 100)

            }
        }

    });
    currentCommissioObserver.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true,
    });
}

let historicalCommissioObserver = null

function historicalCommission(value) {
    clearAllObserver()

    let previousValues = {
        typeValue: null,
        directionValue: null,
        changeTimeValue: null,
        timeIntervaValue: null,
        dateTimeValue: null
    };

    historicalCommissioObserver = new MutationObserver(() => {
        const inputGroup = document.querySelectorAll(
            ".future_order_trade_filter_wrap > div > .mantine-1g7e83g > div > .mantine-dcm9q0 > .mantine-wz61vw"
        );
        const typeSelect = inputGroup[0]
        const directionSelect = inputGroup[1]
        const changeTimeSelect = inputGroup[2]
        // const timeInterval = document.querySelector('.future_order_trade_filter_wrap > .tr-items-center > .mantine-15he3b8 > .tr-border-c-text-1');
        const dateTimeInput = document.querySelector('.future_order_trade_filter_wrap > .tr-items-center > .gui_date_a6245a30 > div > span');

        const hasChanged =
            typeSelect.value != previousValues.typeValue ||
            directionSelect.value != previousValues.directionValue ||
            changeTimeSelect.value != previousValues.changeTimeValue ||
            // timeInterval.innerHTML != previousValues.timeIntervaValue ||
            dateTimeInput.innerHTML != previousValues.dateTimeValue
        if (typeSelect && directionSelect && changeTimeSelect && dateTimeInput && hasChanged) {
            previousValues = {
                firstStageTabs: value,
                typeValue: typeSelect.value,
                directionValue: directionSelect.value,
                changeTimeValue: changeTimeSelect.value,
                // timeIntervaValue: timeInterval.innerHTML,
                dateTimeValue: dateTimeInput.innerHTML
            }
            createTableBottomPerpetual(previousValues)
        }
    });
    historicalCommissioObserver.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true,
    });
}

let transactionRecorObserver = null

function transactionRecord(value) {
    clearAllObserver()

    let previousValues = {
        roleValue: null,
        directionValue: null,
        timeIntervaValue: null,
        startTimeValue: null,
        endTimeValue: null
    };

    transactionRecorObserver = new MutationObserver(() => {
        const selectGroup = getElement("perpetual.table.selectGroup")
        const roleSelect = selectGroup[0]
        const directionSelect = selectGroup[1]
        // const timeInterval = document.querySelector('.future_order_trade_filter_wrap > .mantine-15he3b8 > .tr-border-c-text-1');
        const dateTimeInput = getElement("perpetual.table.dateTimeInput")
        const startTime = dateTimeInput[0]
        const endTime = dateTimeInput[1]
        const pagePagination = JSON.parse(localStorage.getItem('pagePagination'))
        const hasChanged =
            roleSelect.value != previousValues.roleValue ||
            directionSelect.value != previousValues.directionValue ||
            // timeInterval.innerHTML != previousValues.timeIntervaValue ||
            startTime.value != previousValues.startTimeValue || endTime.value != previousValues.endTimeValue || pagePagination.isChange
        if (roleSelect && directionSelect && startTime && endTime && hasChanged) {
            previousValues = {
                firstStageTabs: value,
                roleValue: roleSelect.value,
                directionValue: directionSelect.value,
                // timeIntervaValue: timeInterval.innerHTML,
                startTimeValue: startTime.value,
                endTimeValue: endTime.value,
                current: pagePagination.current,
                size: pagePagination.pageSize

            }
            createTableBottomPerpetual(previousValues)
        }
    });
    transactionRecorObserver.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true,
    });
}

let capitalFloObserver = null

function capitalFlow(value) {
    clearAllObserver()

    let previousValues = {
        currencyValue: null,
        operationTypeValue: null,
        timeIntervaValue: null,
        dateTimeValue: null
    };

    capitalFloObserver = new MutationObserver(() => {
        const selectGroup = document.querySelectorAll(
            ".future_order_trade_filter_wrap > div > .mantine-1g7e83g > div > .mantine-dcm9q0 > input"
        );
        const currencySelect = selectGroup[0]
        const operationTypeSelect = selectGroup[1]
        // const timeInterval = document.querySelector('.future_order_trade_filter_wrap > .tr-items-center > .mantine-15he3b8 > .tr-border-c-text-1');
        const dateTimeInput = document.querySelector('.future_order_trade_filter_wrap > .tr-items-center > .gui_date_a6245a30 > div > span');

        const hasChanged =
            currencySelect.value != previousValues.currencyValue ||
            operationTypeSelect.value != previousValues.operationTypeValue ||
            // timeInterval.innerHTML != previousValues.timeIntervaValue ||
            dateTimeInput.innerHTML != previousValues.dateTimeValue
        if (currencySelect && operationTypeSelect && dateTimeInput && hasChanged) {
            previousValues = {
                firstStageTabs: value,
                currencyValue: currencySelect.value,
                operationTypeValue: operationTypeSelect.value,
                // timeIntervaValue: timeInterval.innerHTML,
                dateTimeValue: dateTimeInput.innerHTML
            }
            createTableBottomPerpetual(previousValues)
        }
    });
    capitalFloObserver.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true,
    });
}

let tradingRoboObserver = null

function tradingRobot(value) {
    clearAllObserver()
    let previousValues = {
        tradingTypeValue: null
    };

    tradingRoboObserver = new MutationObserver(() => {
        const tradingTypeTabs = document.querySelector(
            '.sc-55f74860-0 > .mantine-1ryitj8 > .mantine-ydn5px > div > div > .mantine-14rgv10 > .mantine-1a44ght > button[data-active="true"] > .mantine-d4p53s > span'
        );

        const hasChanged =
            tradingTypeTabs.innerHTML != previousValues.tradingTypeValue
        if (tradingTypeTabs && hasChanged) {
            previousValues = {
                firstStageTabs: value,
                tradingTypeValue: tradingTypeTabs.innerHTML
            }
            createTableBottomPerpetual(previousValues)
        }
    });
    tradingRoboObserver.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true,
    });
}

function clearAllObserver() {
    if (positionObserver) positionObserver.disconnect();
    if (historicalPositioObserver) historicalPositioObserver.disconnect();
    if (currentCommissioObserver) currentCommissioObserver.disconnect();
    if (historicalCommissioObserver) historicalCommissioObserver.disconnect();
    if (transactionRecorObserver) transactionRecorObserver.disconnect();
    if (capitalFloObserver) capitalFloObserver.disconnect();
    if (tradingRoboObserver) tradingRoboObserver.disconnect();
}